<template>
    <div id="init-viewer-wrapper">
    </div>
</template>
  
<script>
export default {
    name: 'Camera',
    components: {},
    mounted() {
        this.initViewer()
    },
    methods: {
        async initViewer() {
            Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzM2RjYjJlOC01ZTQwLTQwODYtOTEwMy02M2U4OGEzYjQyNGUiLCJpZCI6MjI5NjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODI0NTYwMzF9.VG2_T9ry8EnBWAh4msJ3s6m2jW_5hgAZQvfEQDh-WQs"

            //这两个参数一定要在初始化视图之前进行定义
            // window.Cesium.Camera.DEFAULT_VIEW_FACTOR = 10
            // window.Cesium.Camera.DEFAULT_VIEW_RECTANGLE = window.Cesium.Rectangle.fromDegrees(117.940573, 36.808406, 118.313421, 36.468825);
            //这个参数的作用想体现出来，必须通过flyToBoundingSphere方法
            // window.Cesium.Camera.DEFAULT_OFFSET = new window.Cesium.HeadingPitchRange(-0.2, -0.5, 100)
            window.viewer = new window.Cesium.Viewer("init-viewer-wrapper", {
                terrainProvider: new window.Cesium.CesiumTerrainProvider({
                    url: 'http://data.mars3d.cn/terrain',
                    requestWaterMask: true,
                    requestVertexNormals: true
                }),
                imageryProvider: new window.Cesium.ArcGisMapServerImageryProvider({
                    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
                }),
                sceneMode: window.Cesium.SceneMode.SCENE3D,
                vrButton: false,
                animation: false,
                baseLayerPicker: false,
                geocoder: false,
                timeline: false,
                fullscreenButton: false,
                homeButton: false,
                creditContainer: document.createElement('div'),
                infoBox: true,
                navigationHelpButton: false,
                sceneModePicker: false,
                scene3DOnly: true,
                skyBox: new window.Cesium.SkyBox({
                    sources: {
                        positiveX: require('@/assets/images/tycho2t3_80_px.jpg'),
                        negativeX: require('@/assets/images/tycho2t3_80_mx.jpg'),
                        positiveY: require('@/assets/images/tycho2t3_80_py.jpg'),
                        negativeY: require('@/assets/images/tycho2t3_80_my.jpg'),
                        positiveZ: require('@/assets/images/tycho2t3_80_pz.jpg'),
                        negativeZ: require('@/assets/images/tycho2t3_80_mz.jpg'),
                    }
                })
            });

            //look时的旋转角度
            // window.viewer.camera.defaultLookAmount = 0.9
            // setInterval(()=>{
            //     window.viewer.camera.lookLeft()
            // },2000)



            // window.viewer.camera.setView({
            //     destination: window.Cesium.Cartesian3.fromDegrees(-115.0, 37.0, 1000),
            //     orientation: {
            //         heading: window.Cesium.Math.toRadians(0),
            //         pitch: window.Cesium.Math.toRadians(0),
            //         roll: window.Cesium.Math.toRadians(0)
            //     }
            // });



            // window.viewer.camera.constrainedAxis = window.Cesium.Cartesian3.UNIT_X;



            // window.viewer.camera.flyTo({
            //     destination: new window.Cesium.Cartesian3(0, 30000000, 0),//window.Cesium.Rectangle.fromDegrees(80, 26, 140.0, 35.5)
            //     orientation: {
            //         heading: window.Cesium.Math.toRadians(0),
            //         pitch: window.Cesium.Math.toRadians(-90),
            //         roll: 0.0
            //     }
            // });

            // const tileset = new window.Cesium.Cesium3DTileset({
            //     url: window.Cesium.IonResource.fromAssetId(40866),
            // });
            // await tileset.readyPromise
            // window.viewer.scene.primitives.add(tileset);
            // window.viewer.camera.flyToBoundingSphere(tileset.boundingSphere);
        }
    }
}
</script>
  
<style>
#init-viewer-wrapper {
    width: 100%;
    height: 100%;
}
</style>
  